import Logo from "./Logo.tsx";
import {Brand} from "./Brand.tsx";
import {Button} from "./Button.tsx";
import '../../../styles/modules/navbar.css'
import SearchBar from "./SearchBar.tsx";
import LoginBadge from "../LoginBadge.tsx";

import {useLocation} from "react-router-dom";

const NavBar = () => {

    const location = useLocation();

    const isHomePage = location.pathname === '/home';
    const isMainPage = location.pathname === '/'
    const isRegisterPage = location.pathname === '/register';
    const isLoginPage = location.pathname === '/login';
    const isLibraryPage = location.pathname === '/library';
    const isArticlePage = location.pathname === '/article';

    return (

        <nav className="navbar navbar-expand-xl fixed-top shadow-sm">
            <div className="container-fluid">
                <Logo/>
                <Brand/>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav align-content-end me-auto mb-2 mb-lg-0">
                        {
                            (isLoginPage || isLibraryPage || isRegisterPage || isArticlePage)
                            &&
                            <Button name={"Home"}
                                    svg={"M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"}
                                    id={"button-home"}
                                    needsBadge={false} link={'/home'}/>
                        }
                        <Button name={"Cart"}
                                svg={"M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"}
                                id={"button-cart"} needsBadge={true} link={'/cart'}/>
                        <Button name={"Library"}
                                svg={"M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"}
                                id={"button-store"} needsBadge={false} link={'/library'}/>
                    </ul>

                </div>
                <SearchBar/>
                {(isHomePage || isRegisterPage || isArticlePage || isMainPage) && <LoginBadge/>}
            </div>
        </nav>

    );
}

export default NavBar